<script setup lang="ts">
    import { reactive } from 'vue'
    // import { useRouter } from 'vue-router'

    // const router = useRouter()
    const themeVars = reactive({
        cellBackground: '#f6f6f6'
    })
    // const list = [
    //   {
    //     id: '1',
    //     name: '张三',
    //     tel: '13000000000',
    //     address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
    //     isDefault: true,
    //   },
    //   {
    //     id: '2',
    //     name: '李四',
    //     tel: '1310000000',
    //     address: '浙江省杭州市拱墅区莫干山路 50 号',
    //   },
    // ];

    // const onAdd = () => {
    //     router.push({
    //         path: '/address/edit'
    //     })
    // }
    // const onEdit = () => {
    //     router.push({
    //         path: '/address/edit'
    //     })
    // }
</script>

<template>
    <van-config-provider :theme-vars="themeVars">
        <div class="py-10 bg-[#19c865] text-center text-white text-base mb-4">
            <div>账户余额(元)</div>
            <div class="mt-2 text-lg font-bold">¥<span class="text-3xl">100</span></div>
        </div>
        <van-cell-group inset class="p-4">
            <van-row :gutter="[16, 16]">
                <van-col span="12">
                    <div class="bg-[#f6f6f6] text-center py-2 rounded-lg">
                        <div class="text-base text-[#232a24]"><span class="text-lg font-bold">1000</span>元</div>
                        <div class="text-sm text-[#999]">赠送100</div>
                    </div>
                </van-col>
                <van-col span="12">
                    <div class="bg-[#f6f6f6] text-center py-2 rounded-lg">
                        <div class="text-base text-[#232a24]"><span class="text-lg font-bold">1000</span>元</div>
                        <div class="text-sm text-[#999]">赠送100</div>
                    </div>
                </van-col>
                <van-col span="12">
                    <div class="bg-[#f6f6f6] text-center py-2 rounded-lg">
                        <div class="text-base text-[#232a24]"><span class="text-lg font-bold">1000</span>元</div>
                        <div class="text-sm text-[#999]">赠送100</div>
                    </div>
                </van-col>
                <van-col span="12">
                    <div class="bg-[#f6f6f6] text-center py-2 rounded-lg">
                        <div class="text-base text-[#232a24]"><span class="text-lg font-bold">1000</span>元</div>
                        <div class="text-sm text-[#999]">赠送100</div>
                    </div>
                </van-col>
            </van-row>
            <van-field center clearable placeholder="请输入充值金额，无赠送" class="mt-4 rounded-lg">
                <template #button>
                    <van-button type="primary">充值</van-button>
                </template>
            </van-field>
        </van-cell-group> 
    </van-config-provider>
</template>